<template>
    <view>
        <view class="wrap">
            <u-swiper :list="list" height="400"></u-swiper>
        </view>
        <view class="content">
                <view class="flex">
                    <view class="flex-1" @click="gomain(1)">
                        <u-icon label="百年历程" label-size="29" label-color="#5c5c5c" size="80" name="/static/icon/century.png" label-pos="bottom" margin-top="10"/>
                    </view>
                    <view class="flex-1" @click="gomain(2)">
                        <u-icon label="红色基地" label-size="29" label-color="#5c5c5c" size="80" name="/static/icon/site.png" label-pos="bottom" margin-top="10"/>
                    </view>
                    <view class="flex-1" @click="gomain(3)">
                        <u-icon label="伟人烈士" label-size="29" label-color="#5c5c5c" size="80" name="/static/icon/personage.png" label-pos="bottom" margin-top="10"/>
                    </view>
                    <view class="flex-1" @click="gomain(4)">
                        <u-icon label="新闻游记" label-size="29" label-color="#5c5c5c" size="80" name="/static/icon/news.png" label-pos="bottom" margin-top="10"/>
                    </view>
                    <view class="flex-1" @click="govideo()">
                        <u-icon label="宣传视频" label-size="29" label-color="#5c5c5c" size="80" name="/static/icon/video.png" label-pos="bottom" margin-top="10"/>
                    </view>
                </view>
            <view class="box">
                <u-section title="百年历程" :right="true" font-size="32" :show-line="false" color="#ff0000" @click="gomain(1)"></u-section>
                <view class="top" @click="goToOne(3,11)">
                    <u-time-line>
                        <view v-for="item in eventList" :key="item.id">
                            <u-time-line-item>
                                <template v-slot:content>
                                    <view>
                                        <view class="u-order-title">{{ item.eventTime }}</view>
                                        <view class="u-order-desc">{{ item.eventTitle }}</view>
                                        <!-- <u-parse :html="item.content"></u-parse> -->
                                    </view>
                                </template>
                            </u-time-line-item>
                        </view>
                       <!-- <u-time-line-item>
                            <template v-slot:content>
                                <view>
                                    <view class="u-order-title">2020</view>
                                    <view class="u-order-desc">[自提柜]您的快件已放在楼下侧门，直走前方53.6米，左拐约10步，再右拐直走，见一红灯笼停下</view>
                                </view>
                            </template>
                        </u-time-line-item>
                        <u-time-line-item>
                            <template v-slot:content>
                                <view>
                                    <view class="u-order-title">2021</view>
                                    <view class="u-order-desc">【深圳市】日照香炉生紫烟，遥看瀑布挂前川，飞流直下三千尺，疑是银河落九天。</view>
                                </view>
                            </template>
                        </u-time-line-item> -->
                    </u-time-line>
                </view>
            </view>
            <view class="box">
                <u-section title="红色基地" :right="true" font-size="32" :show-line="false"  color="#ff0000" @click="gomain(2)"></u-section>
                <view class="top">
                    <view v-for="item in siteList" :key="item.id">
                            <view class="u-body-item u-flex" @click="goToOne(1,item.id)">
                                <view class="info">
                                    <!-- <view class="title u-line-2">红色基地</view> -->
                                    <view class="brief u-line-2">
                                    {{ item.siteTitle }}
                                    </view>
                                <view class="footer">
                                <view class="siteauthor">{{item.siteAuthor}} </view>
                                <view class="sitetime">{{item.updateTime}}</view>
                                 </view>
                                
                                </view>
                                
                                <image
                                    :src="filePath+item.cover"
                                    mode="aspectFill"></image>
                            </view>
                            <u-line color="#5b5b5b" margin="22rpx 0" />
                            </view>
                            
                            <!-- <view class="u-body-item u-flex">
                                <view class="info">
                                    <view class="brief u-line-2">
                                    第十三军军部旧址
                                    </view>
                                <view class="footer">作者 2021.8.24</view>
                                
                                </view>
                                
                                <image
                                    src="/static/zw.png"
                                    mode="aspectFill"></image>
                            </view> -->
                </view>
            </view>
            <view class="box">
                <u-section title="名人烈士" :right="true" font-size="32" :show-line="false"  color="#ff0000" @click="gomain(3)"></u-section>
                <!-- <u-line color="#5b5b5b" margin="22rpx 0" /> -->
                <view class="top">
                    <view v-for="item in personageList" :key="item.id">
                            <view class="u-body-item u-flex" @click="goToOne(2,item.id)">
                                <view class="info">
                                    <!-- <view class="title u-line-2">红色基地</view> -->
                                    <view class="brief u-line-2">
                                    {{ item.personageName }}
                                    </view>
                                <view class="footer">
                                <view class="siteauthor">{{item.personageEditor}} </view>
                                <view class="sitetime">{{item.updateTime}}</view>
                                 </view>
                                
                                </view>
                                
                                <image
                                    :src="filePath+item.cover"
                                    mode="aspectFill"></image>
                            </view>
                            <u-line color="#5b5b5b" margin="22rpx 0" />
                            </view>
                </view>
            </view>
            <view class="box">
                <u-section title="游记新闻" :right="true" font-size="32" :show-line="false"  color="#ff0000" @click="gomain(4)"></u-section>
                <view class="top">
                    <view v-for="item in travelList" :key="item.id" @click="goToOne(3,item.id)">
                            <view class="u-body-item u-flex">
                                <view class="info">
                                    <!-- <view class="title u-line-2">红色基地</view> -->
                                    <view class="travel u-line-2">
                                    {{ item.travelTitle }}
                                    </view>
                                <view class="footer">
                                <view class="siteauthor">{{item.travelAuthor}} </view>
                                <view class="sitetime">{{item.updateTime}}</view>
                                 </view>
                                
                                </view>
                                
                            </view>
                            <u-line color="#5b5b5b" margin="22rpx 0" />
                            </view>
                </view>
            </view>
            
        </view>
    </view>
</template>

<script>
    import { getEvents, getSites, getPersonages,getTravels, } from "../../api/data.js"
    import { FIlE_PATH } from "../../common/index.js"
    export default {
        data() {
            return {
                list: [{
                        image: '/static/poster/poster1.jpg',
                        title: '昨夜星辰昨夜风，画楼西畔桂堂东'
                    },
                    {
                        image: '/static/poster/poster2.jpg',
                        title: '身无彩凤双飞翼，心有灵犀一点通'
                    },
                    {
                        image: '/static/poster/poster3.jpg',
                        title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
                    }
                ],
                title: '素胚勾勒出青花，笔锋浓转淡',
                subTitle: '2020-05-15',
                thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
                eventList: [],
                siteList:[],
                personageList: [],
                travelList: [],
                filePath:'',
                hline: false,
                // numList: [{
                //     name: '2010:sdasdadadadadasd'
                // }, {
                //     name: '2010:sdasdadadadadasd'
                // }, {
                //     name: '2010:sdasdadadadadasd'
                // }, {
                //     name: '2010:sdasdadadadadasd'
                // }, ],
            }
        },
        mounted() {
            this.getEventList()
            this.getSiteList()
            this.getPersonageList()
            this.getTravelList()
            // console.log(FIlE_PATH)
            this.filePath=FIlE_PATH
            
        },
        methods: {
            test(){
                this.$emit('tab',1)
            },
            onds(){
                uni.navigateTo({
                                url: '/pages/articles/index',
                            });

            },
            getEventList() {
                const _this = this
                getEvents().then(function (res){
                    for(let i=0; i<3; i++)
                    {
                        _this.eventList.push(res.data.data[i])
                    }
                    // console.log(_this.eventList)
                })
            },
            getSiteList() {
                const _this = this
                getSites().then(function (res){
                    for(let i=0; i<3; i++)
                    {
                        _this.siteList.push(res.data.data[i])
                    }
                    // console.log(_this.siteList)
                })
            },
            getPersonageList() {
            
                const _this = this
                getPersonages().then(function(res) {
                    for(let i=0; i<3; i++)
                    {
                        _this.personageList.push(res.data.data[i])
                    }
                    
                })
            },
            getTravelList() {
            
                const _this = this
                getTravels().then(function(res) {
                    for(let i=6; i<9; i++)
                    {
                        _this.travelList.push(res.data.data[i])
                    }
                    
                })
            },
            govideo(){
                uni.navigateTo({
                    url: '/pages/test/index'
                });
            },
            gomain(num){
                this.$emit('tab',num)
            },
            goToOne(type,id) {
                console.log(id)
                uni.navigateTo({
                    url: '/pages/articles/index?id='+id+'&type='+type,
                });
            
            },
        }
    }
</script>

<style lang="scss" scoped>
    .wrap {
        // margin-top: 20rpx;
        padding: 5px;
        margin-bottom: 10rpx;
    }

    .content {
        width: 720rpx;
        margin: 0 auto;
    }

    .box {
        padding: 40rpx ;
        // margin-top: 30rpx;
        margin-bottom: 20rpx;
        background: #fff;
        border: 3rpx solid #ddd;
        border-radius: 20rpx;
    }

    .u-node {
        width: 44rpx;
        height: 44rpx;
        border-radius: 100rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #d0d0d0;
    }

    .top {
        margin-top: 30rpx;
    }

    .u-order-title {
        color: #ff5500;
        font-weight: bold;
        font-size: 32rpx;
    }

    .u-order-desc {
        color: rgb(66, 66, 66);
        font-size: 28rpx;
        margin-bottom: 6rpx;
    }

    .u-order-time {
        color: rgb(200, 200, 200);
        font-size: 26rpx;
    }

    .u-card-wrap {
        background-color: $u-bg-color;
        padding: 1px;
    }

    .u-body-item {
        // font-size: 28rpx;
        color: #424242;
    }

    .u-body-item image {
        width: 20%;
        flex: 0 0 250rpx;
        height: 150rpx;
        border-radius: 8rpx;
        margin-left: 12rpx;
    }
    
    // .title {
    //     font-size: 35rpx;
    //     font-weight:bold;
    //     margin-bottom: 15rpx;
    // }
    .info {
        width: 80%;
    }
    .brief {
        font-size: 35rpx;
        letter-spacing: 5rpx;
        color: #383838;
        margin-bottom: 10rpx;
        padding: 10rpx 0;
        min-height: 100rpx ;
    }
    .travel{
        font-size: 35rpx;
        letter-spacing: 5rpx;
        color: #383838;
        margin-bottom: 10rpx;
        padding: 10rpx 0;
        max-height: 120rpx ;
    }
    .footer {
        
        .siteauthor {
            display: inline-block;
            font-size: 28rpx;
            color: #757575;
            width: 60rpx;
        }
        .sitetime {
            display: inline-block;
            font-size: 24rpx;
            color: #838383;
            margin-left: 10rpx;
        }
    }
    .flex {
        display: flex;
        // width: 750rpx;
        // margin: 0 auto;
        padding: 30rpx 20rpx;
        // margin-top: 30rpx;
        margin-bottom: 20rpx;
        background: #fff;
        border: 3rpx solid #ddd;
        border-radius: 20rpx;
        .flex-1 {
            flex: 0 1 auto;
            margin: 0 auto;
        }
    }
</style>
